<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人详情</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<header th:include="index.html::top"></header>

<br>

<div class="container">
    <h3>联系人详情</h3>
    <div class="card">
        <div class="card-body" id="contactDetails">

        </div>
    </div>
    <div class="btn-group">
        <button id="changeDetails" onclick="changeContactDetails()" class="btn btn-primary" style="display: none">修改联系人</button>
        <button id="cancel" onclick="cancel()" class="btn btn-primary" style="display: none">返回</button>
    </div>
</div>

<script>

    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    $('#userWelcome').append("<p>"+"欢迎，"+localStorage.getItem('welcome')+"</p>");

    $.ajax({
        url: "/doAddressBook/id/" + id,
        type: "GET",
        dataType: "json",
        success: function(response) {

            const birthday = new Date(response.birthday);
            const formattedBirthday = birthday.toLocaleDateString();
            // 更新页面上的联系人详细信息
            $('#contactDetails').html(`
            <h5 class="card-title">${response.name}</h5>
            <p class="card-text">手机号: ${response.phoneNumber}</p>
            <p class="card-text">生日: ${formattedBirthday}</p>
            <p class="card-text">地址: ${response.address}</p>
            <p class="card-text">学校: ${response.school}</p>
            <p class="card-text">QQ: ${response.qq}</p>
            <p class="card-text">邮箱: ${response.email}</p>
            <p class="card-text">备注: ${response.label}</p>
          `);
            $('#changeDetails').removeAttr("style");
            $('#cancel').removeAttr("style");
        },
        error: function() {
            // 处理错误情况
            $('#contactDetails').html('<h5 class="card-title">Failed to retrieve contact details.</h5>');
        }
    });

    function changeContactDetails() {
        // 根据id跳转至修改联系人详情页面
        window.location.href = "changeContactDetails?id=" + id;
        console.log("修改联系人详情，ID：" + id);
    }

    function cancel() {
        window.history.back();
    }

</script>

</body>
</html>